import React, { useEffect, useRef, useState } from "react";
import { PlusOutlined } from "@ant-design/icons";
import type { InputRef } from "antd";
import { Input, Tag, theme } from "antd";
import { TweenOneGroup } from "rc-tween-one";
import { getLabel, addLabel, deleteLabel } from "@/utils/back/index";

const colors = [
  "processing",
  "success",
  "error",
  "warning",
  "magenta",
  "red",
  "volcano",
  "orange",
  "gold",
  "lime",
  "green",
  "cyan",
  "blue",
  "geekblue",
  "purple",
];
const App: React.FC = () => {
  const { token } = theme.useToken();
  const [tags, setTags] = useState([]);
  const [inputVisible, setInputVisible] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const inputRef = useRef<InputRef>(null);

  useEffect(() => {
    if (inputVisible) {
      inputRef.current?.focus();
    }
  }, [inputVisible]);

  const showInput = () => {
    setInputVisible(true);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(e.target.value);
  };

  // 渲染标签
  const forMap = (item: any, index: number) => (
    <span key={index} style={{ display: "inline-block", margin: "10px" }}>
      <Tag
        color={colors[index % colors.length]}
        closable
        onClose={(e) => {
          e.preventDefault();
          handleClose(item.tagsId);
        }}
      >
        {item.name}
      </Tag>
    </span>
  );
  const tagChild = tags.map(forMap);

  const tagPlusStyle: React.CSSProperties = {
    background: token.colorBgContainer,
    borderStyle: "dashed",
    // margin: "8px",
  };
  // 初始化获取标签
  useEffect(() => {
    getLabel().then((res: any) => {
      setTags(res.data);
    });
  }, []);
  // 新增标签
  const handleInputConfirm = () => {
    console.log("新增", inputValue);
    const newTags = tags.map((item: any) => {
      return item.name;
    });
    if (inputValue && newTags.indexOf(inputValue) === -1) {
      addLabel({ name: inputValue }).then(() => {
        getLabel().then((res: any) => {
          setTags(res.data);
        });
      });
    }
    setInputVisible(false);
    setInputValue("");
  };
  // 删除标签
  const handleClose = (tagsId: number) => {
    console.log("删除", tagsId);
    deleteLabel(tagsId).then(() => {
      getLabel().then((res: any) => {
        setTags(res.data);
      });
    });
  };
  return (
    <>
      <div style={{ marginBottom: 16 }}>
        <TweenOneGroup
          appear={false}
          enter={{ scale: 0.8, opacity: 0, type: "from", duration: 100 }}
          leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
          onEnd={(e) => {
            if (e.type === "appear" || e.type === "enter") {
              (e.target as any).style.display = "inline-block";
              (e.target as any).style.marginRight = "10px";
            }
          }}
        >
          {tagChild}
          {inputVisible ? (
            <Input
              ref={inputRef}
              type="text"
              size="small"
              style={{ width: 78 }}
              value={inputValue}
              onChange={handleInputChange}
              onBlur={handleInputConfirm}
              onPressEnter={handleInputConfirm}
            />
          ) : (
            <Tag onClick={showInput} style={tagPlusStyle}>
              <PlusOutlined /> New Tag
            </Tag>
          )}
        </TweenOneGroup>
      </div>
    </>
  );
};

export default App;
